<template>
    <div id="order" style="width: 100%;height:350px;" />
</template>

<script>
import { getDailyFinishOrder } from '@/api'
import { timeFormat } from "@/util"

export default {
    name: "DailyFinishOrderStat",

    mounted() {
        this.init()
    },

    methods: {
        init() {
            getDailyFinishOrder
                .request()
                .then(({ data }) => {
                    const time = []
                    const purchase = []
                    const sell = []
                    data.data.forEach(i => {
                        time.push(timeFormat('MM 月 dd日', new Date(i.time)))
                        purchase.push(i.purchase)
                        sell.push(i.sell)
                    })
                    this.setOptions({ time, purchase, sell })
                })
        },

        setOptions({ time, purchase, sell }) {
            let MyEcharts = this.$echarts.init(document.getElementById('order'))
            MyEcharts.setOption({
                title: {
                    text: '历史订单完成情况统计',
                    left: 'center',
                    align: 'right',
                    textStyle: {
                        color: '#00eeff',  // 图例文字的颜色
                    },
                },
                xAxis: {
                    data: time,
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        textStyle: {
                            color: '#7edae8',  //坐标的字体颜色
                        },
                    },
                },
                grid: {
                    left: 10,
                    right: 10,
                    bottom: 20,
                    top: 30,
                    containLabel: true
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross'
                    },
                    padding: [5, 10]
                },
                yAxis: {
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        textStyle: {
                            color: '#7edae8',  //坐标的字体颜色
                        },
                    },
                },
                legend: {
                    data: ['采购订单', '销售订单'],
                    right: 10
                },
                series: [
                    {
                        name: '采购订单',
                        smooth: true,
                        type: 'line',
                        data: purchase
                    },
                    {
                        name: '销售订单',
                        smooth: true,
                        type: 'line',
                        data: sell
                    }
                ]
            })
        }
    }
}
</script>
